<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="supplierone">
			<image :src="detail.avatar" class="headimg"></image>
			<view class="oneinfo">
				<view class="namedes">
					<text>{{detail.name}}</text>
					<image :src="detail.mimage" v-if="detail.mimage" mode="heightFix"></image>
					<view class="xinyong_box">
						<view class="xin">信</view>
						<view class="xin_number">{{detail.credit_value}}</view>
						<view class="shiming" v-if="detail.authentication[0].realname">实</view>
						<view class="qiye" v-if="detail.authentication[0].enterprise">企</view>
					</view>
				</view>
				<view class="onedes">{{detail.address}} 距离 {{detail.distance}}km </view>
				<text class="recently">近期采购 {{detail.purchase_num}} 单</text>
			</view>
		</view>
		<view class="onewanted">
			<navigator :url="'/home/index/wantedetail?id='+detail.id" hover-class="none" class="wantedinfo">
				<text class="clamp1 infoname">{{detail.titles}}</text>
				<text class="infonumbers">求购数量：{{detail.number}}{{detail.unit}} 丨{{detail.stoptime}}截止</text>
				<text class="infoarea">求购地区：{{detail.city}}</text>
			</navigator>
			<view class="wantedrights">
				<text>{{detail.createtime}}</text>
			</view>
		</view>
		<view class="onewanted">
			<view class="Lineone">
				<view class="Linetitle">货品规格</view>
				<view class="Linevalue">
					<block v-for="(item,index) in detail.spec" :key="index">
						<view class="value_line">{{index}}：{{item}}</view>
					</block>
				</view>
			</view>
		</view>

		<view class="mainbox">
			<view class="mainline">
				<view class="mainlinetext">报价类型<text>*</text></view>
				<view class="pricetypebox">
					<view :class="type==1?'upcaron':'upcar'" @click="type = 1">上车价</view>
					<view :class="type==2?'homepriceon':'homeprice'" @click="type = 2">到货价</view>
				</view>
			</view>
			<view class="mainline">
				<view class="mainlinetext">我的报价<text>*</text></view>
				<u-input v-model="money" type="digit" :border="false" placeholder="请填写报价" class="mainlineinput"
					:clearable="false" />
				<text class="sysmol">元/{{detail.unit}}</text>
			</view>
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
				themeColor="#007AFF"></simple-address>
			<view class="mainline">
				<view class="mainlinetext">供货地区<text>*</text></view>
				<view @tap="openAddres" class="mainlineposition">
					<view class="flex_bet_align">
						<view class="title" v-if="!address[0]">请选择供货地区</view>
						<view class="clamp1" style="max-width: 400rpx;" v-if="address[0]">{{address[0]}} {{address[1]}}
							{{address[2]}}
						</view>
						<u-icon name="arrow-right" color="#999999" size="24" class="mainicon"></u-icon>
					</view>
				</view>
			</view>
			<view class="mainline">
				<view class="mainlinetext">备注说明</view>
				<u-input v-model="client_not" type="text" :border="false" placeholder="请备注看货要求(50字以内)"
					:autoHeight="true" class="mainlineinput" :clearable="false" />
			</view>
		</view>
		<view class="photos">
			<view class="photos_number">上传图片<text class="xingxing">*</text><text
					class="_numbers">({{images.length}}/6)</text></view>
			<view class="photobox">
				<u-upload ref="upload" max-size="12328959" :action="action" width="200" height="200" max-count="6"
					:file-list="echoimages" @on-remove="removeimg" @on-uploaded="uploaded"></u-upload>
			</view>
		</view>
		<view class="detailbottoms">
			<view class="limitbtn" @click="submit">提交报价</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				settingdata: {
					name: '立即报价',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "wanted"
				},
				action: "",
				// 切换报价类型
				type: 1,
				// 上传内容
				images: [],
				// 商品id
				id: 0,
				detail: {
					authentication: [{
						realname: "",
						enterprise: ""
					}]
				},
				// 供货地区
				address: [],
				// 报价
				money: "",
				// 备注
				client_not: "",
				cityPickerValueDefault: [0, 0, 1],
				echoimages:[]
			}
		},
		onLoad(options) {
			_this = this
			_this.action = _this.$api.getbase() + 'fileupload'
			_this.id = options.id
			_this.getdata()
		},
		onShow() {},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("demanddetail", {
					detail_id: _this.id,
					lon: uni.getStorageSync("address").long,
					lat: uni.getStorageSync("address").lat,
				}).then(data => {
					_this.detail = data
				});
			},
			// 切换城市
			openAddres() {
				_this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				_this.address = e.label.split('-');
			},
			// 删除图片
			removeimg(e) {
				_this.images.splice(e, 1)
			},
			// 上传成功
			uploaded(e) {
				_this.images = []
				e.forEach((item, index) => {
					if (item.response) {
						if (item.response.code == 1) {
							_this.images.push(item.response.data.url)

						} else {
							_this.$refs['upload'].remove(index)
						}
					}
				})
			},
			submit() {
				_this.click_shake(function() {
					let data = [{
							value: _this.money,
							type: 1,
							title: "请填写报价"
						}, {
							value: _this.address.length,
							type: 2,
							title: "请选择供货地区"
						}, {
							value: _this.images.length,
							type: 2,
							title: "请上传图片"
						}

					]
					if (_this.$plug.verify(data)) {
						_this.$api.post("demandoffer", {
							money: _this.money,
							type_id: _this.id,
							demand_type: _this.type,
							city: _this.address.join(','),
							client_not: _this.client_not,
							images: _this.images,
							unit: _this.detail.unit,
							lon: uni.getStorageSync("address").long,
							lat: uni.getStorageSync("address").lat,
						}).then(data => {
							wx.showToast({
								title: "提交成功"
							})
							setTimeout(function() {
								wx.navigateBack({
									delta: 1
								})
							}, 500);
						});
					}
				})
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.supplierone {
		padding: 42rpx 44rpx;
		display: flex;
		flex-direction: row;
		background-color: #fff;
		border-bottom: 10rpx solid #F2F2F2;

		.headimg {
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
		}

		.oneinfo {
			margin-left: 17rpx;
			width: 520rpx;
			display: flex;
			flex-direction: column;

			.namedes {
				display: flex;
				flex-direction: row;
				align-items: flex-end;

				text {
					color: #333333;
					font-size: 32rpx;
				}

				image {
					height: 36rpx;
					margin-left: 12rpx;
					width: auto;
				}

				.xinyong_box {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 8rpx;

					.xin {
						width: 30rpx;
						height: 30rpx;
						background: #00C575;
						border-radius: 3px 0 0 3rpx;
						text-align: center;
						line-height: 30rpx;
						color: #fff;
						font-size: 20rpx;
					}

					.xin_number {
						background-color: #fff;
						border: 2rpx solid #00C575;
						border-radius: 0 3rpx 3rpx 0;
						color: #00C575;
						font-size: 20rpx;
						text-align: center;
						height: 30rpx;
						line-height: 30rpx;
						min-width: 46rpx;
					}
				}
			}

			.onedes {
				margin-top: 26rpx;
				color: #858585;
				font-size: 24rpx;
			}

			.recently {
				margin-top: 10rpx;
				color: #858585;
				font-size: 24rpx;
			}
		}
	}

	.onewanted {
		padding: 30rpx 13rpx 40rpx 21rpx;
		margin: 0 25rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 2rpx solid #E6E6E6;

		.wantedinfo {
			display: flex;
			flex-direction: column;
			flex: 1;

			.infoname {
				color: #222222;
				font-size: 30rpx;
			}

			.infonumbers {
				margin-top: 23rpx;
				color: #858585;
				font-size: 24rpx;
			}

			.infoarea {
				margin-top: 13rpx;
				color: #858585;
				font-size: 24rpx;
			}
		}

		.wantedrights {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			text {
				color: #9C9C9C;
				font-size: 22rpx;
			}
		}
	}

	.Lineone {
		display: flex;
		flex-direction: row;

		.Linetitle {
			width: 130rpx;
			color: #222222;
			font-size: 30rpx;
			display: block;
			text-align: justify;
			text-align-last: justify;
		}

		.Linevalue {
			margin-left: 82rpx;
			display: flex;
			flex-direction: column;
			flex: 1;

			.value_line {
				color: #333333;
				font-size: 30rpx;
			}
		}
	}

	.mainbox {
		padding: 0 21rpx 60rpx 21rpx;
		margin: 0 25rpx;
		display: flex;
		flex-direction: column;
		border-bottom: 2rpx solid #E6E6E6;

		.mainline {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 52rpx;

			.mainlinetext {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
				width: 150rpx;

				text {
					color: #FF0000;
				}
			}

			.pricetypebox {
				margin-left: 74rpx;
				display: flex;
				flex-direction: row;

				.upcaron {
					width: 186rpx;
					height: 62rpx;
					text-align: center;
					line-height: 62rpx;
					border-radius: 30rpx 0 0 30rpx;
					color: #ffffff;
					background-color: #38BE8C;
				}

				.upcar {
					width: 186rpx;
					height: 62rpx;
					text-align: center;
					line-height: 62rpx;
					border-radius: 30rpx 0 0 30rpx;
					color: #999999;
					background-color: #E4E4E4;
				}

				.homepriceon {
					width: 186rpx;
					height: 62rpx;
					text-align: center;
					line-height: 62rpx;
					border-radius: 0 30rpx 30rpx 0;
					color: #ffffff;
					background-color: #38BE8C;
				}

				.homeprice {
					width: 186rpx;
					height: 62rpx;
					text-align: center;
					line-height: 62rpx;
					border-radius: 0 30rpx 30rpx 0;
					color: #999999;
					background-color: #E4E4E4;
				}
			}

			.mainlineinput {
				margin-left: 74rpx;
				font: 30rpx;
				color: #333333;
				flex: 1;
			}

			.sysmol {
				margin-left: 20rpx;
				color: #333333;
				font-size: 30rpx;
			}

			.mainlineposition {
				margin-left: 74rpx;
				color: #333333;
				font-size: 30rpx;
				flex: 1;

				.title {
					color: #cccccc;
					font-size: 26rpx;
				}
			}

			.mainicon {
				margin-left: 20rpx;
			}
		}
	}

	.photos {
		margin: 0 25rpx;
		padding: 43rpx 18rpx 170rpx 18rpx;
		display: flex;
		flex-direction: column;

		.photos_number {
			font-size: 30rpx;
			color: #222222;
			font-weight: bold;
			display: flex;
			flex-direction: row;
			align-items: center;

			.xingxing {
				color: #FF0000;
			}

			._numbers {
				color: #999999;
				font-size: 22rpx;
			}
		}

		.photobox {
			margin-top: 30rpx;

			image {
				width: 207rpx;
				height: 207rpx;
				border-radius: 5rpx;
			}

			.imgupdata {
				width: 207rpx;
				height: 207rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #C1C1C1;
				border-radius: 4rpx;

				image {
					width: 66rpx;
					height: auto;
				}
			}
		}
	}

	.detailbottoms {
		height: 120rpx;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
		align-items: center;
		justify-content: center;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 50;

		.limitbtn {
			height: 90rpx;
			width: 680rpx;
			background: linear-gradient(86deg, #38be8c 0%, #05adbb 100%);
			border-radius: 45rpx;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			font-size: 34rpx;
			font-weight: bold;
		}
	}
</style>
